{% extends 'base.html' %}
{% block title %}{{ title }}{% endblock %}
{% block content %}

<style>
    .reportSentencesDiv {
        border-style: groove;
        margin-left: 80px;
        padding-top: 10px;
    }

    .selectDropdownWidth {
        width: 100%;
        max-width: 350px;
    }

    .normalImage {
        display: block;
        max-height: 700px;
        margin-left: auto;
        margin-right: auto;
        width: 75%;
    }

	a:hover {
  	background-color: #ffffbd;
	}
</style>

<br>

<h3 class="display-4 text-center">{{ file }}</h3>

<div class="row justify-content-center pb-3">
    <div class="col-md-auto">
        <button onclick="$.getJSON('/export/pdf/{{file}}', (x) => {pdfMake.createPdf(x).download(x['info']['title']);})" class="btn btn-md btn-outline-secondary">Export PDF</button>
    </div>
    <div class="col-md-auto">
        <button class="btn btn-md btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Export Navigator JSON</button>
        <div class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenuButton">
            <h6 class="dropdown-header">Enterprise Layer</h6>
            <a class="dropdown-item" onclick="$.getJSON('/export/nav/{{file}}', (x) => {downloadLayer(x);})">download</a>
<!--            <a class="dropdown-item" onclick="$.getJSON('/export/nav/{{file}}', (x) => {viewLayer(x);})">view</a>-->
        </div>
    </div>
    </div>
</div>

<div class="row">
    <div class="col reportSentencesDiv">
        {% for elmt in final_html %}
            {% if elmt.tag == 'img' %}
                <img src="{{elmt.text}}" class="normalImage" onclick="sentenceContext({{elmt.uid}}, 'img')"> <br><br>
            {% elif elmt.tag == 'header' %}
                <h3>{{elmt.text}}</h3> 
            {% elif elmt.tag == 'li' and elmt.found_status == 'true' %}
                <li><a class="bg-warning" id="elmt{{elmt.uid}}" onclick="sentenceContext({{elmt.uid}}, 'p')">{{elmt.text}}</a></li> <br>
            {% elif elmt.tag == 'li' %}
                <li><a id="elmt{{elmt.uid}}" onclick="sentenceContext({{elmt.uid}}, 'p')">{{elmt.text}}</a></li> <br>
            {% elif elmt.found_status == 'true' %}
                <a class="bg-warning" id="elmt{{elmt.uid}}" onclick="sentenceContext({{elmt.uid}}, 'p')">{{elmt.text}}</a> <br><br>
            {% else %}
                <a id="elmt{{elmt.uid}}" onclick="sentenceContext({{elmt.uid}}, 'p')">{{elmt.text}}</a> <br><br>
            {% endif %}
        {% endfor %}
    </div>
    <div class="col col-sm-4 ">
        <div class='missingTechniquesView' id='sentenceContextSection'>
                <span class='spanMissingTechniqueView'>
                    Techniques Found
                </span>
            <br><br>
            <div id="sentenceInformation">
                <table id="tableSentenceInfo" class="table">
                    <tbody>

                    </tbody>
                </table>
            </div>
            <br><br>
            <span class='spanMissingTechniqueView'>
                    Confirmed Techniques
                </span>
            <br><br>
            <div id="confirmedsentenceInformation">
                <table id="confirmedSentenceInfo" class="table">
                    <tbody>

                    </tbody>
                </table>
            </div>
            <hr><br><br>
             <span class='spanAddMissingTechnique'>
                    Add A Missing Technique
                </span> <br><br>
            <div class="container">
                <div class="row">
                  <select id="missingTechniqueSelect" class="selectpicker" data-show-subtext="true" data-live-search="true">
                      {% for tech in attack_uids %}
                    <option class="selectDropdownWidth" style="overflow: scroll" value="{{tech.uid}}">{{tech.name}}</option>
                      {% endfor %}
                  </select>
                </div>
            </div>
            <br>
            &nbsp;&nbsp;&nbsp;<button onclick="addMissingTechnique()" class="btn btn-md btn-outline-primary">Add Technique</button> <br><br>
        </div>



        <br><br>
        <br><br>


    </div>



{% endblock %}
